<template>
  <div>
    <div v-if="title" class="title">{{ title }}</div>
    <el-form
      ref="ruleFormRef"
      style="width: 100%"
      :model="ruleForm"
      label-width="auto"
      :class="{ ruleForm: mode === 'edit' }"
      :size="spaceSize"
      :inline="inline"
      :label-position="labelPosition"
    >
      <template v-for="(item, index) in formDataForm" :key="index">
        <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
          <!--select--->
          <el-select
            v-if="item.type === 'select'"
            v-model="ruleForm[item.prop]"
            v-bind="item.component"
          >
            <el-option
              v-for="options in item.options()"
              :key="options.value"
              :label="options.label"
              :value="options.value"
              v-bind="options"
            />
          </el-select>
          <!--radio--->

          <el-radio-group v-else-if="item.type === 'radio'" v-model="ruleForm[item.prop]">
            <el-radio
              v-for="options in item.options()"
              :value="options.value"
              :key="options.value"
              v-bind="options"
              >{{ options.label }}</el-radio
            >
          </el-radio-group>

          <!--checkbox--->
          <el-checkbox-group v-else-if="item.type === 'checkbox'" v-model="ruleForm[item.prop]">
            <el-checkbox
              v-for="options in item.options()"
              :key="options.value"
              :value="options.value"
              :label="options.label"
              v-bind="options"
            />
          </el-checkbox-group>

          <!--switch-->
          <el-switch
            v-else-if="item.type === 'switch'"
            v-model="ruleForm[item.prop]"
            v-bind="item.component"
          />

          <!--date-picker-->
          <el-date-picker
            v-else-if="item.type === 'date-picker'"
            v-model="ruleForm[item.prop]"
            :type="item.pickerTyep"
            :shortcuts="item.shortcuts"
            v-bind="item.component"
          />

          <!--time-picker-->
          <el-time-picker
            v-else-if="item.type === 'time-picker'"
            v-model="ruleForm[item.prop]"
            arrow-control
            v-bind="item.component"
          />

          <!--tree-select-->
          <el-tree-select
            v-else-if="item.type === 'tree-select'"
            v-model="ruleForm[item.prop]"
            :data="item.options()"
            v-bind="item.component"
          />

          <!--upload 文件上传-->
          <com-Upload-img
            ref="refComUpload"
            v-else-if="item.type === 'upload'"
            :fileName="item.prop"
            @onUpload="onUpload"
          ></com-Upload-img>
          <!--input--->
          <el-input
            v-else
            :type="item.type"
            v-model="ruleForm[item.prop]"
            v-bind="item.component"
          />
        </el-form-item>
      </template>

      <el-form-item v-if="showButton">
        <el-button type="primary" @click="submitForm"> 确定 </el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, useAttrs, toRefs } from 'vue'
import type { FormInstance } from 'element-plus'

const emits = defineEmits(['submitForm', 'resetForm'])
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<any>({})
const attrs = useAttrs()
const state = reactive({
  title: attrs.title,
  spaceSize: attrs.spaceSize,
  inline: attrs.inline,
  formData: attrs.formData,
  labelPosition: attrs.labelPosition,
  showButton: attrs.showButton,
  mode: attrs.mode
})
const { title, spaceSize, inline, formData, labelPosition, showButton, mode } = toRefs(state)
if (formData.value instanceof Array) {
  formData.value.forEach((element) => {
    if (element.prop) ruleForm[element.prop] = element.value || ''
  })
}
const formDataForm = reactive<any>(formData.value)

//提交
const submitForm = async () => {
  let formEl: FormInstance | undefined = ruleFormRef.value
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      emits('submitForm', ruleForm, 'query')
    } else {
      console.log('error submit!', fields)
    }
  })
}

//上传信息
const onUpload = (data: object, name: string) => {
  console.log(data, '===========获取到传的信息===============', name)
}

//重置
const resetForm = () => {
  let formEl: FormInstance | undefined = ruleFormRef.value
  if (!formEl) return
  formEl.resetFields()
  emits('resetForm', ruleForm, 'query')
}

defineExpose({
  submitForm,
  resetForm
})
</script>

<style lang="scss" scoped>
.title {
  font-size: 14px;
  padding: 0 0 10px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
  font-weight: bold;
  position: relative;
  overflow: hidden;
}
.ruleForm {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  flex-wrap: wrap;
  justify-content: space-between;
  :deep(.el-form-item__label) {
    width: 130px !important;
    color: #99a9bf;
  }

  :deep(.el-form-item) {
    margin-right: 0;
    margin-bottom: 20px;
    width: 46%;
  }
}
</style>
